<template>
  <div>
    <el-drawer
      ref="drawerRef"
      :title="translate('chakanCourse')"
      :visible.sync="isShowDrawer"
      :before-close="closeDrawer"
      size="1000px"
    >
      <div class="detail_info mb20">
        <div>{{ translate("xyxm") }}：{{ detail.name }}</div>
        <div>{{ translate("zjh") }}：{{ detail.idCard }}</div>
        <div>
          {{ translate("sex") }}：{{
            detail.sex == "1"
              ? translate("nan")
              : detail.sex == "2"
                ? translate("nv")
                : translate("bm")
          }}
        </div>
        <div>{{ translate("csrq") }}：{{ detail.birthday }}</div>
      </div>
      <el-tabs v-model="activeTab" @tab-click="tabsChange">
        <el-tab-pane :label="translate('ygkc')" name="1">
          <el-table
            ref="tableHaveRef"
            v-loading="listLoading"
            :data="list"
            element-loading-text="Loading"
            border
            fit
            :header-row-class-name="'table-header'"
            class="doumee-element-table"
          >
            <el-table-column
              align="center"
              :label="translate('courseName')"
              min-width="100"
              prop="name"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              :label="translate('kclx')"
              min-width="100"
              prop="type"
              show-overflow-tooltip
            >
              <template v-slot="scope">
                <span v-if="scope.row.type == '1'">{{ translate("ttk") }}</span>
                <span v-if="scope.row.type == '3'">{{ translate("cqk") }}</span>
                <span v-if="scope.row.type == '4'">{{ translate("sjk") }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              :label="translate('kcjg')"
              min-width="100"
              prop="price"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              :label="translate('zkss')"
              min-width="100"
              prop="num"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              :label="translate('skjl')"
              min-width="100"
              prop="teachers"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              :label="translate('ywckss')"
              min-width="100"
              prop="finishNum"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              :label="translate('courseStatus')"
              min-width="100"
              prop="status"
              show-overflow-tooltip
            >
              <template v-slot="scope">
                <span
                  v-if="scope.row.status == '1'"
                >{{ translate("dfb") }}/{{ translate("xiajia") }}</span>
                <span v-if="scope.row.status == '2'">{{
                  translate("bmz")
                }}</span>
                <span v-if="scope.row.status == '3'">{{
                  translate("bmyjz")
                }}</span>
                <span v-if="scope.row.status == '4'">{{
                  translate("underway")
                }}</span>
                <span v-if="scope.row.status == '5'">{{
                  translate("over")
                }}</span>
                <span v-if="scope.row.status == '6'">{{
                  translate("yqx")
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              :label="translate('handle')"
              min-width="100"
              prop="name"
            >
              <template v-slot="scope">
                <div class="flex-cc">
                  <el-button
                    v-if="meta.indexOf('changeCourse') > -1"
                    type="text"
                    @click="rowCourseChange(scope.row)"
                  >{{ translate("huanke") }}</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane :label="translate('qdRecord')" name="2">
          <div class="mb20">
            <span>{{ translate("courseName") }}：</span>
            <el-input
              v-model="filters.courseName"
              class="w200"
              :placeholder="translate('qsr')"
            />
            <span class="ml30">{{ translate("qdTime") }}：</span>
            <el-date-picker
              v-model="filters.signInTime"
              type="date"
              class="w200"
              value-format="yyyy-MM-dd"
              :placeholder="translate('qsr')"
            />
            <el-button type="primary" class="ml30" @click="getList(1)">{{
              translate("cz")
            }}</el-button>
            <el-button class="ml10" @click="clear">{{
              translate("clear")
            }}</el-button>
          </div>
          <el-table
            ref="tableHaveRef"
            v-loading="listLoading"
            :data="list"
            element-loading-text="Loading"
            border
            fit
            :header-row-class-name="'table-header'"
            class="doumee-element-table"
          >
            <el-table-column
              align="center"
              :label="translate('courseName')"
              min-width="100"
              prop="courseName"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              :label="translate('skjl')"
              min-width="100"
              prop="teacherName"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              :label="translate('skTime')"
              min-width="160"
              prop="beginTime"
              show-overflow-tooltip
            >
              <template v-slot="scope">
                <span>{{ scope.row.beginTime }}</span>
                <span
                  v-if="scope.row.endTime"
                >-{{ scope.row.endTime.slice(11) }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              :label="translate('qdTime')"
              min-width="160"
              prop="signInTime"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              :label="translate('qdMethod')"
              min-width="100"
              prop="signInType"
              show-overflow-tooltip
            >
              <template v-slot="scope">
                <span v-if="scope.row.signInType == '0'">{{
                  translate("coachQd")
                }}</span>
                <span v-if="scope.row.signInType == '1'">{{
                  translate("venueQd")
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              :label="translate('qdR')"
              min-width="100"
              prop="signInUser"
              show-overflow-tooltip
            />
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <Paginations
        :total="total"
        :page="pagination.page"
        @current-change="getList"
        @SizeChange="handleSizeChange"
      />
    </el-drawer>
    <el-drawer
      ref="changeCourseRef"
      :title="translate('huanke')"
      :visible.sync="isShowChangeC"
      :before-close="closeChangeC"
      size="600px"
    >
      <div class="property-title">{{ translate("dqkcxx") }}</div>
      <div class="changeCourseInfo">
        <div class="item">
          {{ translate("courseName") }}：{{ rowCourseInfo.name }}
        </div>
        <div class="item">
          {{ translate("kclx") }}：{{
            rowCourseInfo.type == "1"
              ? translate("ttk")
              : rowCourseInfo.type == "3"
                ? translate("cqk")
                : translate("sjk")
          }}
        </div>
        <div class="item">
          {{ translate("kcjg") }}：{{ rowCourseInfo.price }}
        </div>
        <div class="item">
          {{ translate("coach") }}：
          <span v-for="item in rowCourseInfo.teachers" :key="item">{{
            item
          }}</span>
        </div>
        <div class="item">{{ translate("kss") }}：{{ rowCourseInfo.num }}</div>
      </div>
      <div class="property-title">{{ translate("ghkc") }}</div>
      <div>
        <el-form label-suffix="：">
          <el-form-item :label="translate('courseName')">
            <el-select
              v-model="changeCourseForm.courseId"
              :placeholder="translate('qxz')"
              filterable
              class="w200"
              @change="courseChange"
            >
              <el-option
                v-for="item in changeCourseList"
                :key="item.courseId"
                :label="item.courseName"
                :value="item.courseId"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="translate('courseSalePr')">
            <el-input
              v-model="changeCourseForm.price"
              class="w200"
              disabled
              type="text"
            />
          </el-form-item>
          <el-form-item>
            <el-button @click="isShowChangeC = false">{{
              translate("cancel")
            }}</el-button>
            <el-button
              :loading="subLoading"
              type="primary"
              @click="subChangeCourse"
            >{{ translate("enter") }}{{ translate('genghuan') }}</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { haveBuyCourse, studentSigninRecord, listCourse, studenetChangeCourse } from '@/api'
export default {
  props: {
    meta: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      isShowDrawer: false,
      detail: {},
      subLoading: false,
      filters: {},

      activeTab: '1',
      list: [],
      total: 0,
      listLoading: false,
      pagination: {
        rows: 10,
        page: 1
      },

      isShowChangeC: false,
      rowCourseInfo: {},
      changeCourseForm: {
        price: ''
      },
      changeCourseList: []

    }
  },
  methods: {
    rowCourseChange(row) {
      this.rowCourseInfo = { ...row }
      this.changeCourseForm.price = row.price
      this.getListCourse()
      this.isShowChangeC = true
    },
    closeDrawer() {
      this.isShowDrawer = false
      this.$emit('close')
    },
    clear() {
      this.filters = {}
      this.getList(1)
    },
    getList(page) {
      if (page) {
        this.pagination.page = page
      }
      const param = {
        id: this.detail.id,
        ...this.filters
      }
      const fn = this.activeTab === '1' ? haveBuyCourse : studentSigninRecord
      this.listLoading = true
      fn({ param, pagination: this.pagination }).then(res => {
        this.listLoading = false
        this.list = res.recordList || []
        this.total = res.totalCount
      }, () => {
        this.listLoading = false
      })
    },
    getListCourse() {
      listCourse({
        param: {
          venueId: sessionStorage.getItem('venueId'),
          flag: '2',
          hkFlag: '1',
          courseType: this.rowCourseInfo.type
        }
      }).then(res => {
        this.changeCourseList = res.recordList || []
      })
    },
    courseChange(id) {
      const item = this.changeCourseList.find(i => i.courseId === id)
      this.changeCourseForm.price = item.price
    },
    tabsChange() {
      this.pagination = {
        rows: 10,
        page: 1
      }
      this.getList()
    },
    subChangeCourse() {
      if (!this.changeCourseForm.courseId) {
        return this.$message.warning(this.translate('qxzkc'))
      }
      this.subLoading = true
      studenetChangeCourse({
        param: {
          id: this.detail.id,
          oldId: this.rowCourseInfo.id,
          newId: this.changeCourseForm.courseId
        }
      }).then(res => {
        this.subLoading = false
        if (res.errorCode !== '000000') return
        this.$message.success(this.translate('xgkccg'))
        this.getList()
        this.isShowChangeC = false
      }, () => {
        this.subLoading = false
      })
    },
    handleSizeChange(val) {
      this.pagination.rows = val
      this.getList()
    },

    closeChangeC() {
      this.isShowChangeC = false
    }
  }
}
</script>

<style lang="scss" scoped>
.changeCourseInfo {
  display: flex;
  flex-wrap: wrap;
  .item {
    width: 33.3%;
    margin-bottom: 20px;
  }
}
.detail_info {
  display: flex;
  div {
    flex: 1;
  }
}
</style>
